<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>上传错题</title>
</head>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/element-ui/lib/index.js}"></script>
<link rel="stylesheet" th:href="@{/element-ui/lib/theme-chalk/index.css}">
<script th:src="@{/js/axios.js}"></script>
<style>
    form {
        width: 1000px;
        height: 800px;
        margin: 0 auto;
    }

    input {
        width: 50%;
    }

    textarea{
        width: 400px;
        height: 600px;

    }
    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
    }
    /*让表单占据外部容器（对话框）的大小，这样表单里的输入框不会溢出*/
    .el-form{
        width: 100%;
    }
    /*缩短对话框长度*/
    .el-dialog{
        height: 750px;
    }
    /*.el-select-form .el-select{
        width: 250%;
    }
   .el-select-form{
       width: 30%;
   }*/
    img{
        width: 400px;
    }

    #speech{
        width: 1000px;
        margin: 0 auto;
    }
    #photo{
        width: 1000px;
        margin: 0 auto;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }
    .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }
</style>
<body>
<form>

    图片识别：<input type="file" id="uploadflie" accept="image/*">
    识别结果：<textarea id="result"></textarea>
    原图:<img id="yuantu" src=""/>
</form>
<div id="speech">
    语音录入：<a th:href="@{/tospeech}">点击前往</a>
</div>

<div id="photo">
    摄像头调用：<a th:href="@{/getphoto}">点击前往</a>
</div>
<div id="app">

    <el-button type="primary" @click="dialogVisible=true">上传<i class="el-icon-upload el-icon--right"></i></el-button>

    <!--添加数据对话框表单-->
    <el-dialog
            title="编辑错题"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :rules="rules" :model="exam" label-width="80px">
            <el-form-item label="题目" prop="title">
                <el-input v-model="exam.title"></el-input>
            </el-form-item>
            <el-form-item label="选项A" prop="optionA">
                <el-input v-model="exam.optionA"></el-input>
            </el-form-item>
            <el-form-item label="选项B" prop="optionB">
                <el-input v-model="exam.optionB"></el-input>
            </el-form-item>
            <el-form-item label="选项C" prop="optionC">
                <el-input v-model="exam.optionC"></el-input>
            </el-form-item>
            <el-form-item label="选项D" prop="optionD">
                <el-input v-model="exam.optionD"></el-input>
            </el-form-item>
            <el-form-item label="答案" prop="answer">
                <el-input v-model="exam.answer"></el-input>
            </el-form-item>
            <el-form-item class="el-select-form" label="科目类型" prop="types">
                <el-select class="el-select"  v-model="exam.types" placeholder="请选择科目类型">
                    <el-option label="计算机网络" value="1"></el-option>
                    <el-option label="操作系统" value="2"></el-option>
                    <el-option label="计算机组成原理" value="3"></el-option>
                    <el-option label="数据结构" value="4"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="附加图片" prop="image" v-model="exam.image">
                <el-upload
                        class="avatar-uploader"
                        action="/common/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addQue">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                //错题本数据
                exam:{
                    id:"",
                    title:"",
                    optionA:"",
                    optionB:"",
                    optionC:"",
                    optionD:"",
                    answer:"",
                    types:"",
                    image:""
                },
                imageUrl: '',
                fileList:[],
                dialogVisible:false,
                rules:{
                    title:[
                        {required:true,message:"请输入题目"}
                    ]
                }

            };
        },
        methods:{
            addQue(){
                axios.post("/questions",this.exam).then((resp)=>{
                    if (resp){
                        this.dialogVisible=false;
                    }
                })
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleAvatarSuccess(res) {
                this.imageUrl = `/common/download?name=${res}`
            }
        }
    })
</script>
</body>
<script>
    var fileUpload = document.getElementById('uploadflie');

    var result = document.getElementById('result');

    fileUpload.onchange = function () {

        //获取上传的图片用于展示
        var file = this.files;
        console.log(file);

        var reader = new FileReader();

        var fileObj = file[0];

        var image = document.getElementById('yuantu');
        // 转换成功后的操作，img.src即为转换后的DataURL
        reader.onload = function(e) {
            if (reader.readyState === 2) { //加载完毕后赋值
                image.src = e.target.result;
            }
        }
        reader.readAsDataURL(fileObj);


        //这里做图片大小限制
        if(fileObj.size/1024>1024*10){
            alert('上传图片不能大于10M');
            //调用函数,对图片进行压缩
            // compress(fileObj,function (imgBase64) {
            //     base64 = imgBase64;
            // })
            return;
        }

        // console.log(fileObj);

        var params = new FormData();
        params.append('file', fileObj)

        console.log(params.get("file"));

        axios({
            url: "/toMap2",
            method: "post",
            data: params,
            headers: { 'Content-Type': 'multipart/form-data' }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);

            let string = response.data;



            // 处理成功情况
            result.innerHTML = string;



        }).catch(function (error) {
            // 处理失败情况
            alert("上传失败！");
            console.log(error.message)
        });



        // reader.readAsDataURL(fileObj);
        // reader.onload = function () {
        //
        //     var data = reader.result
        //     let newData = data.replace(/^data:image\/\w+;base64,/, '') // replace + 正则 把前缀替换成空
        //
        //     console.log(newData);
        //
        //
        //
        //
        //
        //     axios({
        //         // 请求方法
        //         method: 'POST',
        //         url: '/toMap',
        //         // url参数
        //         params: {
        //             myUrl: newData
        //         }
        //     }).then(function (response) {
        //         console.log(response);
        //         console.log(response.data);
        //
        //         let string = response.data;
        //
        //
        //         // 处理成功情况
        //         result.innerHTML = string;
        //     }).catch(function (error) {
        //         // 处理失败情况
        //         alert("上传失败！");
        //         console.log(error.message)
        //     });
        //
        //     var image = document.getElementById('yuantu');
        //     image.src = reader.result;
        // };
    }



</script>

</html>